<template>
    <div class="modal" :class="{ 'is-active': locked }">
        <div class="modal-background"></div>
        <div class="modal-content">
            <slide-unlock v-if="showSlide" @unlock-granted="unlock" />
            <pin-unlock v-if="showPin" @unlock-granted="unlock" />
        </div>
    </div>
</template>


<script>
import { mapState, mapActions } from 'vuex';
import SlideUnlock from '@/components/SlideUnlock';
import PinUnlock from '@/components/PinUnlock';
import _ from 'lodash';

export default {
    components: { SlideUnlock, PinUnlock },
    data() {
        return {};
    },
    computed: {
        ...mapState({
            locked: state => state.App.locked,
            lockType: state => state.App.lockType
        }),
        showSlide() {
            return _.eq(this.lockType, 'slide');
        },
        showPin() {
            return _.eq(this.lockType, 'pin');
        }
    },
    methods: {
        ...mapActions([
            'unlock'
        ])
    }
}
</script>

